import React from 'react';
import {useQueryString} from "../hooks";
import {useLocation,useSearchParams} from "react-router-dom";
import querystring from "querystring";

function One(props) {
    // console.log(useLocation())
    // const {search} = useLocation();
    // console.log(search);// ?a=xxx&b=xxx
    // 1-
    // http://localhost:3000/one?a=100&b=200
    // console.log(search);// ?a=100&b=200
    // console.log(search.slice(1));// a=100&b=200
    // console.log(search.slice(1).split("&"));// ['a=100', 'b=200']

    // const obj = {};
    // search.slice(1).split("&").forEach(v=>{
    //     // console.log(v.split("="));// [a,100],[b,200];
    //     const [key,value] = v.split("=");
    //     obj[key] = value;
    // })
    // const {a,b} = obj;


    // 2- 封装
    // function useQueryString(){
    //     const {search} = useLocation();
    //     const obj = {};
    //     search.slice(1).split("&").forEach(v=>{
    //         const [key,value] = v.split("=");
    //         obj[key] = value;
    //     })
    //     return obj;
    // }
    // const {a,b} = useQueryString();

    // 3- 可以将封装的函数放置到外部
    // const {a,b} = useQueryString();

    // 4- 可以使用模块querystring
    // 4-1:安装  cnpm install querystring
    // 4-2:引入  import querystring from "querystring"
    // const {search} = useLocation();
    // console.log(querystring.parse(search.slice(1)));
    // const {a,b} = querystring.parse(search.slice(1));


    // 5- 可以使用useSearchParams
    // console.log(useSearchParams())
    const [search] = useSearchParams();
    console.log(search.get("a"));// 输出a
    console.log(search.get("b"));// 输出b
    console.log(search.has("a"));// 是否拥有a
    console.log(search.has("c"));// 是否拥有b
    const a = search.get("a");
    const b = search.get("b");




    return (
        <div>
            <h3>One</h3>
            <p>a:{a}</p>
            <p>b:{b}</p>
        </div>
    );
}

export default One;